<template>
	<view class="content_boxs">
		<view class="user_xx_img">
			<u-upload width='150' :custom-btn="true" :show-upload-list="false" ref="uUpload" :action="action"
				@on-success="success">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<image class="user_xx_img_image" :src="userInfo.avatar" mode=""></image>
				</view>
			</u-upload>
		</view>
		<view class="user_xx_text">
			<view class="user_xx_text_item flex_sb flxe_al" @click="show=true">
				<view class="">
					昵称 ：{{userInfo.nickname}}
				</view>
				<u-icon name="arrow-right" v-model="userInfo.nickname" color="#999999" size="28"></u-icon>
			</view>
			<view class="user_xx_text_item flex_sb flxe_al" @click="show1=true">
				<view class="">
					性别 ： <text v-text="userInfo.gender==1?'男':'女'"></text>
				</view>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
			<view class="user_xx_text_item flex_sb flxe_al">
				<view>
					电话 ：{{phoneNumber}}
				</view>
				<u-button size="mini" class="u-reset-button pay-btn" open-type="getPhoneNumber" type="success"
					@getphonenumber="getPhone">更改</u-button>


			</view>
			<view class="user_xx_text_item flex_sb flxe_al" @click="show2=true">
				<view class="">
					地址：{{userInfo.area}}
				</view>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>

		</view>
		<!-- <view class="user_xx_button" @click="tuichu">
			退出登录
		</view> -->
		<!-- 修改昵称弹窗 -->
		<u-modal v-model="show" title='修改昵称' cancel-color='#333333' confirm-color='#FF9A33' show-cancel-button
			show-confirm-button class="pop_input" @confirm='confirms("nickname")'>
			<input type="text" value="" v-model="userInfo.nickname" placeholder="请输入您的昵称">
		</u-modal>
		<!-- 修改性别弹窗 -->
		<u-modal v-model="show1" title='修改性别' cancel-color='#333333' confirm-color='#FF9A33' show-cancel-button
			show-confirm-button class="pop_input" @confirm='confirms("sex")'>
			<view class="flex_sb sex">
				<view class="flxe_al flex_ce" @click="sexe_type=1">
					<image v-if="sexe_type==0"
						src="https://www.sdxiecheng.cn/uploads/20231023/6ad9fac7cfe5b2cbc28a8e7c5cc79bd8.png" mode="">
					</image>
					<image v-else src="https://www.sdxiecheng.cn/uploads/20231023/09ab57abe1bb210110d177884ab0f23d.png"
						mode=""></image>
					<view :class="sexe_type==1?'color':''">
						男
					</view>
				</view>
				<view class="flxe_al flex_ce" @click="sexe_type=0">
					<image v-if="sexe_type==1"
						src="https://www.sdxiecheng.cn/uploads/20231023/623e13f7eab03c75cb383eb07c242d50.png" mode="">
					</image>
					<image v-else src="https://www.sdxiecheng.cn/uploads/20231023/15b5fa7d3d7ae3dc5f81dbcfcca4ec68.png"
						mode=""></image>
					<view :class="sexe_type==0?'color':''">
						女
					</view>
				</view>
			</view>
		</u-modal>
		<!-- //修改地址弹窗 -->
		<u-modal v-model="show2" title='修改地址' cancel-color='#333333' confirm-color='#FF9A33' show-cancel-button
			show-confirm-button class="pop_input" @confirm="Address">
			<view class="inou" @click="mapss()">
				<view class="" v-if="userInfo.area">
					{{userInfo.area}}
				</view>
				<view class="" v-else>
					点击更改地址信息
				</view>
			</view>
			<input type="text" value="" v-model="userInfo.address" placeholder="请输入详细地址">
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show3: false, //省市区下拉
				show: false, //昵称弹窗,
				show2: false, //地址弹窗
				show1: false, //性别弹窗
				userInfo: {
					longitude: '',
					latitude: '',
					area: ''
				},
				sexe_type: 1,
				action: 'https://www.sdxiecheng.cn/index.php/index/ajax/upload',
				phoneNumber:uni.getStorageSync('phoneNumber')
			}
		},
		onLoad() {
			this.getLocation1()
			this.getUserInfo()

		},
		onShow() {
			let _this = this
			uni.$on('updates', function(data) {
				if (data.type == 1) {
					_this.getUserInfo()
				} else {

				}

			})
		},
		methods: {
			getLocation1() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: (res) => {
						this.longitude = res.longitude
						this.latitude = res.latitude
					}
				})
			},
			// 展开地图选择
			mapss() {
				let _this = this
				uni.chooseLocation({
					longitude: _this.longitude,
					latitude: _this.latitude,
					success: function(res) {
						_this.userInfo.longitude = res.longitude
						_this.userInfo.latitude = res.latitude
						_this.userInfo.area = res.address
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			// 修改地址
			Address() {
				console.log(this.userInfo)
				uni.$u.http.post('user/save_address', {
					openid: uni.getStorageSync('openid'),
					user_id: uni.getStorageSync('userId'),
					area: this.userInfo.area, //地区文字
					address: this.userInfo.address, //详细地址
					longitude: this.userInfo.longitude, //地区经度
					latitude: this.userInfo.latitude, //地区纬度
				}).then(res => {

					this.getUserInfo()
				})
			},

			// 退出登录
			tuichu() {
				uni.removeStorageSync("userId")
				uni.showLoading({
					title: '登录过期'
				})
				setTimeout(function() {
					uni.reLaunch({
						url: "/pages/login/login"
					})

				}, 1000)
			},
			// 修改信息
			confirms(e) {
				if (e == 'nickname') {
					uni.$u.http.post('user/save_nickname', {
						openid: uni.getStorageSync('openid'),
						user_id: uni.getStorageSync('userId'),
						nickname: this.userInfo.nickname,
					}).then(res => {
						console.log(res)
						this.getUserInfo()
					})
				} else if (e == 'sex') {
					this.userInfo.gender = this.sexe_type
					uni.$u.http.post('user/save_gender', {
						openid: uni.getStorageSync('openid'),
						user_id: uni.getStorageSync('userId'),
						gender: this.userInfo.gender,
					}).then(res => {
						console.log(res)
						this.getUserInfo()
					})
				} else if (e == 'avatar') {
					uni.$u.http.post('user/save_avatar', {
						openid: uni.getStorageSync('openid'),
						user_id: uni.getStorageSync('userId'),
						avatar: this.userInfo.avatar,
					}).then(res => {
						console.log(res)
						this.getUserInfo()
					})
				}



			},

			// 获取用户信息
			getUserInfo() {
				uni.$u.http.post('user/userinfo', {
					openid: uni.getStorageSync('openid')
				}).then(res => {
					console.log(res)
					this.userInfo = res.data

				})
			},
			// 上传头像
			success(e) {
				console.log("上传头像")
				console.log(e)
				this.userInfo.avatar = (e.data.fullurl)
				this.confirms("avatar")
			},
			getPhone(e) {
				console.log(e)
				if (!e.detail.iv) {
					uni.showToast({
						title: '获取手机号失败',
						icon: 'none'
					})
					return;
				}
				var that = this;
				uni.login({
					provider: 'weixin',
					success(res) {
						let code = res.code;
						var obj = {
							code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						}
						that.decryptPhone(obj);
					}
				})
			},
			decryptPhone(obj) {
				uni.$u.http.post('user/getMobile', obj).then(res => {
					// console.log(res.data)
					this.postPhone(res.data.phoneNumber)
					// this.postPhone()
				})
			},
			// 提交手机号
			postPhone(phone) {

				uni.$u.http.post('user/binding', {
					mobile: phone,
					// openid: uni.getStorageSync('openid')
				}).then(res => {
					// console.log(res, '授权  ')

					uni.setStorageSync('phoneNumber', phone)
					uni.showToast({
						icon: 'success',
						title: '授权成功'
					})
					this.phoneNumber = uni.getStorageSync('phoneNumber')
					// this.getUserInfo()
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.msg
					})
				})
			}

		}

	}
</script>

<style scoped>
	.user_xx_img {
		position: relative;
		padding: 75rpx 0;
		background: #ffffff;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user_xx_img_image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;
	}

	.pre-item-image {
		width: 90%;
		height: 90%;
	}

	.pre-item,
	.slot-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 149rpx;
		height: 150rpx;
		background: #F1F1F1;
		border-radius: 50%;
		overflow: hidden;
	}

	.u-upload {
		/* 		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%); */
	}

	.user_xx_text {
		background: #ffffff;
	}

	.user_xx_text_item {
		padding: 36rpx 20rpx;
		font-size: 30rpx;
		line-height: 60rpx;
		font-weight: 400;
		color: #333333;
	}

	.user_xx_button {
		width: 500rpx;
		height: 80rpx;
		background: #FBAA27;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 250rpx auto 0;
		font-size: 36rpx;
		font-weight: 400;
		color: #FEFEFE;
	}

	.pop_input /deep/ .u-model__content {
		min-height: 117rpx !important;
		padding: 0 50rpx !important;
		margin-top: 59rpx !important;
	}

	.pop_input /deep/ .uni-input-input,
	uni-input,
	input {
		width: 100% !important;
		height: 70rpx !important;
		line-height: 70rpx !important;
		background: #F6F6F6 !important;
		font-size: 28rpx !important;
		font-weight: 400 !important;
		text-align: center !important;
		color: #333333 !important;
	}

	.inou {
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		margin-bottom: 20rpx;
		background: #F6F6F6;
		font-size: 28rpx;
		font-weight: 400;
		text-align: center;
		color: #333333;
	}

	.u-model__footer {
		border-top: 1px solid #EEEEEE;
		margin-top: 40rpx;
	}

	.sex {
		text-align: center;
	}

	.sex>view {
		width: 50%;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 45px;
	}

	.sex image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 18rpx;
	}

	.color {
		color: #FF9A33;
	}
</style>
